<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${dataId ? '编辑' : '新增'}-告警配置`"
		width="800px"
		:show-content-loading="showLoading"
		:confirm-btn-loading="saveBtnLoading"
		append-to-body
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-confirm="onConfirmBtn"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" :show-message="false">
			<el-row ref="box1">
				<el-col :span="22">
					<el-form-item class="margin-bottom-10" label="告警类型" prop="alarmType">
						<el-select v-model="ruleForm.alarmType" size="medium" class="width-100-percent" :option-list="typeList" placeholder="告警类型">
							<el-option
								v-for="item in typeList"
								:key="item.alarmType"
								:label="item.alarmTypeName"
								:value="item.alarmType"
								@click.native="Allattributes(item)"
							>
								<span style="">{{ item.alarmTypeName }}</span>
								<span style="color: #8492a6; font-size: 13px">{{ item.alarmTypeRemark }}</span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="告警等级" prop="alarmGrade">
						<el-radio-group v-model="ruleForm.alarmGrade">
							<el-radio :label="0">高</el-radio>
							<el-radio :label="1">中</el-radio>
							<el-radio :label="2">低</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="通知方式" prop="notificationMethod">
						<el-checkbox-group v-model="ruleForm.notificationMethod">
							<el-checkbox :label="0">系统推送</el-checkbox>
							<el-checkbox :label="1">公众号推送</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="margin-bottom-10" label="处置方式" prop="disposalMethod">
						<el-radio-group v-model="ruleForm.disposalMethod">
							<el-radio :label="0">任意一人</el-radio>
							<el-radio :label="1">所有人</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="22">
					<el-form-item class="margin-bottom-10" label="触发条件说明">
						<el-input v-model="ruleForm.triggerRemark" type="textarea" :rows="2" placeholder="请输入" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="22">
					<el-form-item class="margin-bottom-10" label="通知角色">
						<div ref="box2" class="flex-between-center margin-bottom-4">
							<el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="checkboxEmpDialogStatea = true">添加角色</el-button>
							<div class="flex-end-center">

							</div>
						</div>
						<div class="wx-notice-emp-box" :style="{maxHeight: `${(dialogTableHeight - 30) / 2}px`}">
							<div
								v-for="(item, index) in ruleForm.noticeRole"
								:key="index"
								class="wx-notice-emp-item"
							>
								<el-tag :type="item.openId ? 'primary' : 'info'" closable class="width-100-percent flex-between-center" @close="onDeleteBtna(index)">
									<div class="flex-start-center">
										<div
											:class="[
												'legend-icon',
												item.openId ? 'legend-icon-primary' : 'legend-icon-info'
											]"
										></div>
										<span>{{ item.name }}</span>
									</div>
								</el-tag>
							</div>
							<span v-if="!ruleForm.noticeRole || !ruleForm.noticeRole.length" class="flex-center width-100-percent">暂无</span>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="22">
					<el-form-item class="margin-bottom-10" label="通知人员">
						<div ref="box3" class="flex-between-center">
							<el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="checkboxEmpDialogState = true">添加人员</el-button>
							<div class="flex-end-center">
								<span class="legend-icon-label item-gap">公众号:</span>
								<div class="flex-start-center margin-right-10">
									<div class="legend-icon legend-icon-primary"></div>
									<span class="legend-icon-label">已绑定</span>
								</div>
								<div class="flex-start-center">
									<div class="legend-icon legend-icon-info"></div>
									<span class="legend-icon-label">未绑定</span>
								</div>
							</div>
						</div>
						<div class="wx-notice-emp-box" :style="{maxHeight: `${(dialogTableHeight - 30) / 2}px`}">
							<div
								v-for="(item, index) in ruleForm.noticePeople"
								:key="index"
								class="wx-notice-emp-item"
							>
								<el-tag :type="item.openId ? 'primary' : 'info'" closable class="width-100-percent flex-between-center" @close="onDeleteBtn(index)">
									<div class="flex-start-center">
										<div
											:class="[
												'legend-icon',
												item.openId ? 'legend-icon-primary' : 'legend-icon-info'
											]"
										></div>
										<span>{{ item.name }}</span>
									</div>
								</el-tag>
							</div>
							<span v-if="!ruleForm.noticePeople || !ruleForm.noticePeople.length" class="flex-center width-100-percent">暂无</span>
						</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<sltArole
			:default-select-rows="ruleForm.noticePeople"
			check-key-name="empId"
			:dialog-state="checkboxEmpDialogStatea"
			@on-visible-change="onVisibleChangeOfCheckboxEmpDialoga"
			@on-confirm="onConfirmBtnOfCheckboxEmpDialoga"
		></sltArole>
		<checkbox-emp-dialog
			:default-select-rows="ruleForm.noticePeople"
			check-key-name="empId"
			:dialog-state="checkboxEmpDialogState"
			@on-visible-change="onVisibleChangeOfCheckboxEmpDialog"
			@on-confirm="onConfirmBtnOfCheckboxEmpDialog"
		></checkbox-emp-dialog>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        spinNotificationMessageConfigCreate,
        spinNotificationMessageConfigUpdate,
        spinNotificationMessageConfigGet, spinNotificationMessageConfigGetType
    } from '../../../api/production/wxPushConfig';
    import checkboxEmpDialog from '../../personnel/group/checkbox-emp-dialog';
    import sltArole from '../../personnel/group/slt-a-role';
    import { validateArr } from '../../../utils/jk/validator';
    import { createalarmconfigList, getlarmconfigList, putAlarmconPaging, getAlarmconfiguration } from '@/api/alarm/alarmcft.js';
    export default {
        components: {
            checkboxEmpDialog,
            sltArole
        },
        props: {
            // 页面权限的前缀
            permissionPrefix: {
                type: String,
                default: ''
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        mixins: [calHeight],
        data() {
            return {
                typeList: [
                    // { alarmType: 1, alarmTypeName: '工资推送', alarmTypeRemark: ' ' },
                    // { alarmType: 2, alarmTypeName: '开台提醒', alarmTypeRemark: ' (根据计划的开台时间提前提醒)' },
                    // { alarmType: 3, alarmTypeName: '温度告警', alarmTypeRemark: ' (温度超出设定值)' },
                    // { alarmType: 4, alarmTypeName: '湿度告警', alarmTypeRemark: ' (湿度超出设定值)' },
                    // { alarmType: 5, alarmTypeName: '停机提醒', alarmTypeRemark: ' (翻改停机:有翻改计划;维保停机:有维修或保养任务;落纱停机:有生产任务,且在一定时间内停机的;其他停机:以上条件之外的停机)' },
                    // { alarmType: 6, alarmTypeName: '产量预警', alarmTypeRemark: ' (完工数量+当班产量=达到订单量的预警线时)' },
                    // { alarmType: 7, alarmTypeName: '落纱预警', alarmTypeRemark: ' (当前长度达到设定长度的一定比例时)' }
                ],
                showDialog: false,
                showLoading: true,
                saveBtnLoading: false,
                ruleForm: {
                    id: null,
                    alarmType: '',
                    alarmTypeName: '',
                    alarmTypeRemark: '',
                    triggerRemark: '',
                    noticeRole: [],
                    noticePeople: [],
                    disposalMethod: 0,
                    alarmGrade: 0,
                    notificationMethod: [0],
                    auditState: 1
                },
                rules: {
                    disposalMethod: [{ required: true, trigger: 'change' }],
                    // notificationMethod: [{ required: true, validator: validateArr, trigger: 'change' }],
                    alarmGrade: [{ required: true, trigger: 'change' }],
                    alarmType: [{ required: true, trigger: 'change' }]
                },
                checkboxEmpDialogStatea: false,
                checkboxEmpDialogState: false
            };
        },
        methods: {
            onDeleteBtna(idx) {
                this.ruleForm.noticeRole.splice(idx, 1);
            },
            onDeleteBtn(idx) {
                this.ruleForm.noticePeople.splice(idx, 1);
            },
            onVisibleChangeOfCheckboxEmpDialoga(e) {
                this.checkboxEmpDialogStatea = e;
            },
            onVisibleChangeOfCheckboxEmpDialog(e) {
                this.checkboxEmpDialogState = e;
            },
            onConfirmBtnOfCheckboxEmpDialoga(arr) {
                arr.forEach(x => {
                    this.ruleForm.noticeRole.push({
                        id: x.id,
                        code: x.code,
                        name: x.name
                        // openId: x.openId
                    });
                });
                this.checkboxEmpDialogStatea = false;
            },
            onConfirmBtnOfCheckboxEmpDialog(arr) {
                arr.forEach(x => {
                    this.ruleForm.noticePeople.push({
                        id: x.id,
                        code: x.code,
                        name: x.name,
                        openId: x.openId
                    });
                });
                this.checkboxEmpDialogState = false;
            },
            createAndUpdateRequest() {
                this.saveBtnLoading = true;
                // 新增
                if (!this.dataId) {
                    this.ruleForm.id = null;
                    const typeItem = this.typeList.find(x => x.alarmType === this.ruleForm.alarmType) || {};
                    this.ruleForm.alarmTypeName = typeItem.alarmTypeName;
                    createalarmconfigList(this.ruleForm).then(res => {
                        this.saveBtnLoading = false;
                        if (res.data.status === 200) {
                            this.$tipsBar(this, 'save');
                            this.$emit('on-finish');
                        }
                    });
                    return;
                }

                // 编辑(确定时触发)
                this.ruleForm.id = this.dataId;
                putAlarmconPaging(this.ruleForm).then(res => {
                    this.saveBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            Allattributes(item) {
                this.ruleForm.alarmTypeName = item.alarmTypeName;
                this.ruleForm.alarmTypeRemark = item.alarmTypeRemark;
            },
            // 弹窗提交按钮
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (this.ruleForm.alarmTypeRemark == null) {
                        this.ruleForm.alarmTypeRemark = '无';
                    } else {
                        if (valid) {
                            this.createAndUpdateRequest();
                        } else {
                            this.$tipsBar(this, 'validator');
                        }
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            // 获取告警类型（完成）
            getNoticeTypeListRequest() {
                return getlarmconfigList().then(res => {
                    if (res.data.status === 200) {
                        this.typeList = res.data.res;
                    }
                });
            },
            getDetailRequest() {
                return getAlarmconfiguration({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                await this.getNoticeTypeListRequest();
                if (this.dataId) await this.getDetailRequest();
                this.showLoading = false;
            }
        },
        watch: {
            // 打开新增
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .wx-notice-emp-box {
        border: solid 1px #dcdee2;
        border-radius: 4px;
        overflow: auto;
        padding: 8px 10px;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;
        .wx-notice-emp-item {
            width: calc(100% / 5);
            padding: 2px;
            flex-shrink: 0;
            box-sizing: border-box;
        }
    }
    .legend-icon-label {
        font-size: 12px;
    }
    .legend-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
    }
    .legend-icon-primary {
        background: #2d8cf0;
    }
    .legend-icon-info {
        background: #c5c8ce;
    }
</style>
